<template>
    <div class="container" style="background-color: #fff;padding: 0 20px;">
        <div class="tool">
            <!-- 搜索列表 -->
            <div class="search">
            <el-button type="success" @click="searchAll" style="margin-right: 10px;">{{ $t("message.queryAll") }}</el-button>
            <el-date-picker
                v-model="queryParmas.queryDate"
                type="date"
                :placeholder="$t('message.selectDate')"
                :disabled-date="disabledDate"
            />
            <el-button type="primary" @click="toSearch" class="query">{{ $t("message.DateQuery") }}</el-button>
          </div>
          <!-- 数据下载 -->
          <div class="downloadExe">
            <el-select v-model="queryParmas.queryType" class="m-2" :placeholder="$t('message.stateChoose')">
             <el-option v-for="(item,index) in labelList" :value="item.value" :label="$t(item.label)" :key="index">
            </el-option>
            </el-select>
            <el-button type="success" :icon="Search" style="margin-left: 10px;" @click="download"></el-button>
          </div>
        </div>
   
        <!-- 数据列表 -->
        <div class="table">
            <div class="table-container">
                <el-table 
                :data="stateList"
                border 
                stripe
                height="calc(100vh - 300px)"
            >
                    <el-table-column type="index" label="#"></el-table-column>
                    <el-table-column width="160px">
                        <template #header>
                            {{ $t("message.datetime") }}
                        </template>
                        <template #default="{row}">
                            {{ filterDate(row.createdAt)  }}
                        </template>
                    </el-table-column>
                    <el-table-column width="160px" prop="module_id" :label="$t('message.id')">               
                        
                    </el-table-column>
                    <el-table-column v-for="(item,index) in propList" :key="index" :prop="item.prop" :label="$t(item.label)" >
                        <template #default="{row}">
                            <el-tag class="ml-2" type="success" v-if="row[item.prop] == 0">正常</el-tag>
                            <el-tag class="ml-2" type="danger" v-else-if="row[item.prop] == 1">报警</el-tag>
                        </template>
                    </el-table-column>
               </el-table>
            </div>
             <div class="pagination-wrapper">
                 <el-pagination
                    v-model:current-page="currentPage"
                    v-model:page-size="queryParmas.pageSize"
                    :page-sizes="[10, 15, 20]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
             </div>
        </div>
    </div>
</template>

<script setup lang="ts">
    defineOptions({
      name: "State"
    })
    import {Search} from '@element-plus/icons-vue'
    import {onMounted,ref,reactive} from 'vue'
    import {getCurrentInstance} from 'vue'
    import tool from '../../utils/tool'
    import { userStore } from '../../store/user'
    let store = userStore()
    let {proxy} = getCurrentInstance()
    let currentPage = ref(1)
    let options = reactive(null)
    let labelList = [
        {
            label: "message.normal",
            value: 0
        },
        {
            label: "message.alarm",
            value: 1
        }
    ]
    let queryParmas = reactive({
        pageSize: 10,
        page: 1,
        queryDate: "",
        queryType: ''
    })
  
    let stateList = ref([])
    let total = ref<number>(0)
    let selectDate = ref<string>('')
        let propList = [
                {
                    prop: "uvc_sta",
                    label: "message.uv"
                },
                {
                    prop: "ir_sta",
                    label: "message.inf"
                }
                ,
                {
                    prop: "temp_sta",
                    label: "message.tem"
                },
                {
                    prop: "hum_sta",
                    label: "message.hum"
                }
                ,
                {
                    prop: "pre_sta",
                    label: "message.pre"
                }
            ]
     // 对时间函数的过滤
     let filterDate = (date:Date) => {
        return new Date(date).toLocaleDateString().replace(/\//g,"-")+' ' + new Date(date).toLocaleTimeString()
     }   
     // 禁用日期
     const disabledDate = (time: Date) => {
         return time.getTime() > Date.now()
     }
    onMounted(async () => {
        getStateList()
        // 获取指定下载的日期
        let {data:res} = await proxy.$adminHttp.get("/admin/downLoadDate")
         options = res.data
    })

    const getStateList = async () => {
    let {data: res} = await proxy.$adminHttp.get("/admin/getStatusList",{
            params: queryParmas
    })
        total.value = res.data.total  //获取查询的总数
        stateList.value = res.data.data    // 数据列表
        console.log(stateList.value)
    }
    // 按照日期进行查询
   const toSearch = () => {
        if (queryParmas.queryDate === '') return proxy.notifyWarning("请选择查询的日期")
        queryParmas.queryDate = new Date(queryParmas.queryDate).toLocaleDateString().replace(/\//g,'-')
        getStateList()
    }
    
    const handleSizeChange = (val:number) => {
        queryParmas.pageSize = val
        getStateList()
    }

    const handleCurrentChange = (val:number) => {
        queryParmas.page = val
        getStateList()
    }
    // 查询所有数据
    const searchAll = () => {
        queryParmas.page = 1
        queryParmas.pageSize = 10
        queryParmas.queryDate = ''
        queryParmas.queryType = ''
        getStateList()
    }

    // 下载excel数据
    const download = async () => {
        if (queryParmas.queryType === '') return proxy.notifyWarning("请先选择报警得类型")
        getStateList()    
   }
</script>

<style lang="less" scoped>
.container {
    background-color: #fff;
    padding: 0 20px;
    height: calc(100vh - 80px); /* 计算总高度 */
    display: flex;
    flex-direction: column;
}

.tool {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0; /* 防止工具栏被压缩 */
    .search {
        margin-top: 20px;
        .add {
            margin-right: 10px;
        }
        .query {
            margin-left: 10px;
        }
     }
   }
   
 .table {
    flex: 1; /* 占据剩余空间 */
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    overflow: hidden; /* 防止溢出 */
    
    .table-container {
        flex: 1; /* 占据大部分空间 */
        overflow: hidden;
        
        /* 表格滚动样式 */
        :deep(.el-table) {
            height: 100% !important;
        }
        
        :deep(.el-table__body-wrapper) {
            overflow-y: auto !important;
        }
    }
    
    .pagination-wrapper {
        flex-shrink: 0; /* 确保分页器始终可见 */
        padding: 15px 0;
        border-top: 1px solid #ebeef5;
        background: #fafafa;
        
        .el-pagination {
            display: flex;
            justify-content: center;
        }
    }
 }
 
 .downloadExe {
    width: 15%;
    display: flex;
 }
</style>